<template>
  <a-card title="学生评级条件设定" :bordered="false">
    <a-tabs default-active-key="1">
      <a-tab-pane key="1" tab="成绩条件">
        <a-form layout="vertical">
          <a-form-item label="成绩权重">
            <a-slider
              v-model="scoreWeight"
              :marks="{ 0: '0%', 25: '25%', 50: '50%', 75: '75%', 100: '100%' } "  />
          </a-form-item>

          <a-form-item label="成绩等级划分">
            <a-table
              :columns="scoreColumns"
              :data-source="scoreData"
              :pagination="false"
              size="middle"
            >
              <template slot="action" slot-scope="text, record">
                <a-button type="link" size="small" @click="handleEditScore(record)">编辑</a-button>
                <a-button type="link" size="small" @click="handleDeleteScore(record)">删除</a-button>
              </template>
            </a-table>
            <a-button type="dashed" style="width: 100%; margin-top: 8px" @click="handleAddScore">
              <a-icon type="plus" /> 添加成绩等级
            </a-button>
          </a-form-item>
        </a-form>
      </a-tab-pane>

      <a-tab-pane key="2" tab="考勤条件" force-render>
        <a-form layout="vertical">
          <a-form-item label="考勤权重">
            <a-slider
              v-model="attendanceWeight"
              :marks="{ 0: '0%', 25: '25%', 50: '50%', 75: '75%', 100: '100%' }"
            />
          </a-form-item>

          <a-form-item label="考勤扣分规则">
            <a-table
              :columns="attendanceColumns"
              :data-source="attendanceData"
              :pagination="false"
              size="middle"
            >
              <template slot="action" slot-scope="text, record">
                <a-button type="link" size="small" @click="handleEditAttendance(record)">编辑</a-button>
                <a-button type="link" size="small" @click="handleDeleteAttendance(record)">删除</a-button>
              </template>
            </a-table>
            <a-button type="dashed" style="width: 100%; margin-top: 8px" @click="handleAddAttendance">
              <a-icon type="plus" /> 添加考勤规则
            </a-button>
          </a-form-item>
        </a-form>
      </a-tab-pane>

      <a-tab-pane key="3" tab="其他条件">
        <a-form layout="vertical">
          <a-form-item label="其他条件权重">
            <a-slider
              v-model="otherWeight"
              :marks="{ 0: '0%', 25: '25%', 50: '50%', 75: '75%', 100: '100%' }
            />
          </a-form-item>

          <a-form-item label="其他评价条件">
            <a-textarea v-model="otherConditions" placeholder="请输入其他评价条件" :rows="4" />
          </a-form-item>

          <a-form-item>
            <a-button type="primary" @click="handleSave">保存设置</a-button>
            <a-button style="margin-left: 10px" @click="handleReset">重置</a-button>
          </a-form-item>
        </a-form>
      </a-tab-pane>
    </a-tabs>

    <!-- 成绩等级编辑模态框 -->
    <a-modal
      title="编辑成绩等级"
      :visible="scoreModalVisible"
      @ok="handleScoreModalOk"
      @cancel="handleScoreModalCancel"
    >
      <a-form :form="scoreForm" layout="vertical">
        <a-form-item label="等级名称">
          <a-input
            v-decorator="[
              'levelName',
              { rules: [{ required: true, message: '请输入等级名称' }] }
            ]"
            placeholder="如：优秀、良好等"
          />
        </a-form-item>
        <a-form-item label="分数范围">
          <a-input-group compact>
            <a-input-number
              v-decorator="[
                'minScore',
                { rules: [{ required: true, message: '请输入最低分数' }] }
              ]"
              style="width: 100px"
              :min="0"
              :max="100"
              placeholder="最低分"
            />
            <a-input
              style="width: 30px; border-left: 0; pointer-events: none; backgroundColor: #fff"
              placeholder="~"
              disabled
            />
            <a-input-number
              v-decorator="[
                'maxScore',
                { rules: [{ required: true, message: '请输入最高分数' }] }
              ]"
              style="width: 100px; border-left: 0"
              :min="0"
              :max="100"
              placeholder="最高分"
            />
          </a-input-group>
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 考勤规则编辑模态框 -->
    <a-modal
      title="编辑考勤规则"
      :visible="attendanceModalVisible"
      @ok="handleAttendanceModalOk"
      @cancel="handleAttendanceModalCancel"
    >
      <a-form :form="attendanceForm" layout="vertical">
        <a-form-item label="考勤类型">
          <a-select
            v-decorator="[
              'type',
              { rules: [{ required: true, message: '请选择考勤类型' }] }
            ]"
            placeholder="请选择考勤类型"
          >
            <a-select-option value="迟到">迟到</a-select-option>
            <a-select-option value="早退">早退</a-select-option>
            <a-select-option value="旷课">旷课</a-select-option>
            <a-select-option value="请假">请假</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="扣分分值">
          <a-input-number
            v-decorator="[
              'deduction',
              { rules: [{ required: true, message: '请输入扣分分值' }] }
            ]"
            style="width: 100%"
            :min="0"
            :max="100"
            placeholder="请输入扣分分值"
          />
        </a-form-item>
        <a-form-item label="说明">
          <a-textarea
            v-decorator="['description']"
            placeholder="请输入说明"
            :rows="2"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </a-card>
</template>

<script>
const scoreColumns = [
  {
    title: '等级名称',
    dataIndex: 'levelName',
    key: 'levelName'
  },
  {
    title: '分数范围',
    dataIndex: 'scoreRange',
    key: 'scoreRange'
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' }
  }
]

const attendanceColumns = [
  {
    title: '考勤类型',
    dataIndex: 'type',
    key: 'type'
  },
  {
    title: '扣分分值',
    dataIndex: 'deduction',
    key: 'deduction'
  },
  {
    title: '说明',
    dataIndex: 'description',
    key: 'description'
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  data() {
    return {
      scoreWeight: 60,
      attendanceWeight: 30,
      otherWeight: 10,
      otherConditions: '',
      scoreColumns,
      attendanceColumns,
      scoreData: [
        {
          key: '1',
          levelName: '优秀',
          scoreRange: '90-100'
        },
        {
          key: '2',
          levelName: '良好',
          scoreRange: '80-89'
        },
        {
          key: '3',
          levelName: '中等',
          scoreRange: '70-79'
        }
      ],
      attendanceData: [
        {
          key: '1',
          type: '迟到',
          deduction: 2,
          description: '每次迟到扣2分'
        },
        {
          key: '2',
          type: '早退',
          deduction: 2,
          description: '每次早退扣2分'
        },
        {
          key: '3',
          type: '旷课',
          deduction: 5,
          description: '每次旷课扣5分'
        }
      ],
      scoreModalVisible: false,
      attendanceModalVisible: false,
      scoreForm: this.$form.createForm(this, { name: 'scoreForm' }),
      attendanceForm: this.$form.createForm(this, { name: 'attendanceForm' }),
      currentEditItem: null
    }
  },
  methods: {
    handleAddScore() {
      this.scoreModalVisible = true
      this.currentEditItem = null
      this.$nextTick(() => {
        this.scoreForm.resetFields()
      })
    },
    handleEditScore(record) {
      this.scoreModalVisible = true
      this.currentEditItem = record
      this.$nextTick(() => {
        const [minScore, maxScore] = record.scoreRange.split('-')
        this.scoreForm.setFieldsValue({
          levelName: record.levelName,
          minScore: parseInt(minScore),
          maxScore: parseInt(maxScore)
        })
      })
    },
    handleDeleteScore(record) {
      this.$confirm({
        title: '确认删除',
        content: `确定要删除成绩等级 "${record.levelName}" 吗?`,
        onOk: () => {
          this.$message.success('删除成功')
        }
      })
    },
    handleScoreModalOk() {
      this.scoreForm.validateFields((err, values) => {
        if (!err) {
          const newItem = {
            key: this.currentEditItem ? this.currentEditItem.key : Date.now().toString(),
            levelName: values.levelName,
            scoreRange: `${values.minScore}-${values.maxScore}`
          }
          
          if (this.currentEditItem) {
            // 更新逻辑
            const index = this.scoreData.findIndex(item => item.key === this.currentEditItem.key)
            this.scoreData.splice(index, 1, newItem)
            this.$message.success('更新成功')
          } else {
            // 新增逻辑
            this.scoreData.push(newItem)
            this.$message.success('添加成功')
          }
          
          this.scoreModalVisible = false
        }
      })
    },
    handleScoreModalCancel() {
      this.scoreModalVisible = false
    },
    handleAddAttendance() {
      this.attendanceModalVisible = true
      this.currentEditItem = null
      this.$nextTick(() => {
        this.attendanceForm.resetFields()
      })
    },
    handleEditAttendance(record) {
      this.attendanceModalVisible = true
      this.currentEditItem = record
      this.$nextTick(() => {
        this.attendanceForm.setFieldsValue({
          type: record.type,
          deduction: record.deduction,
          description: record.description
        })
      })
    },
    handleDeleteAttendance(record) {
      this.$confirm({
        title: '确认删除',
        content: `确定要删除考勤规则 "${record.type}" 吗?`,
        onOk: () => {
          this.$message.success('删除成功')
        }
      })
    },
    handleAttendanceModalOk() {
      this.attendanceForm.validateFields((err, values) => {
        if (!err) {
          const newItem = {
            key: this.currentEditItem ? this.currentEditItem.key : Date.now().toString(),
            type: values.type,
            deduction: values.deduction,
            description: values.description
          }
          
          if (this.currentEditItem) {
            // 更新逻辑
            const index = this.attendanceData.findIndex(item => item.key === this.currentEditItem.key)
            this.attendanceData.splice(index, 1, newItem)
            this.$message.success('更新成功')
          } else {
            // 新增逻辑
            this.attendanceData.push(newItem)
            this.$message.success('添加成功')
          }
          
          this.attendanceModalVisible = false
        }
      })
    },
    handleAttendanceModalCancel() {
      this.attendanceModalVisible = false
    },
    handleSave() {
      this.$message.success('保存成功')
    },
    handleReset() {
      this.scoreWeight = 60
      this.attendanceWeight = 30
      this.otherWeight = 10
      this.otherConditions = ''
      this.$message.success('重置成功')
    }
  }
}
</script>